import React, { useEffect, useRef } from 'react';
import { Form, Input, Modal, Select, Row, Col, DatePicker } from 'antd';
import { payMethod } from '@/utils/constant';

const FormItem = Form.Item;
const Detail = (props: any) => {
  const {
    visible,
    onCancel,
    onOk,
    getForm,
    loading,
    afterClose,
    editId,
  } = props;
  const [form] = Form.useForm();
  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 6 },
      md: { span: 6 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 18 },
      md: { span: 18 },
    },
  };

  useEffect(() => {
    getForm(form);
  }, []);

  return (
    <Modal
      afterClose={afterClose}
      destroyOnClose={true}
      confirmLoading={loading}
      width={1024}
      title={editId !== undefined ? '编辑' : '新增'}
      visible={visible}
      onCancel={onCancel}
      onOk={onOk}
    >
      <Form hideRequiredMark style={{ marginTop: 8 }} form={form} name="basic">
        <Row gutter={12}>
          <Col span={12}>
            <FormItem
              {...formItemLayout}
              label={'客户单位'}
              rules={[{ required: true, message: '请输入客户单位' }]}
              name="customerCompany"
            >
              <Input />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              rules={[{ required: true, message: '请输入法人代表' }]}
              {...formItemLayout}
              label={'法人代表'}
              name="juridicalPerson"
            >
              <Input />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              {...formItemLayout}
              label={'结算方式'}
              name="settlementMethod"
              rules={[{ required: false, message: '请输入结算方式' }]}
            >
              <Select>
                {payMethod.map(item => (
                  <Select.Option key={item.value} value={item.value}>
                    {item.label}
                  </Select.Option>
                ))}
              </Select>
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              rules={[{ required: true, message: '请输入联系人' }]}
              {...formItemLayout}
              label={'联系人'}
              name="contact"
            >
              <Input />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              {...formItemLayout}
              label={'联系方式'}
              rules={[
                { required: true, message: '请输入联系方式' },
                {
                  pattern: /^[0-9\(\)\-\+]{11,}$/,
                  message: '请输入正确的联系方式',
                },
              ]}
              name="contactPhoneNo"
            >
              <Input />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              {...formItemLayout}
              label={'收货人'}
              rules={[{ required: true, message: '请输入收货人' }]}
              name="consignee"
            >
              <Input />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              {...formItemLayout}
              label={'收货人联系方式'}
              rules={[
                { required: true, message: '请输入收货人联系方式' },
                {
                  pattern: /^[0-9\(\)\-\+]{11,}$/,
                  message: '请输入正确的联系方式',
                },
              ]}
              name="consigneePhoneNo"
            >
              <Input />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              {...formItemLayout}
              label={'收货地址'}
              rules={[{ required: true, message: '请输入收货地址' }]}
              name="deliveryAddress"
            >
              <Input />
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
};
export default Detail;
